<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Q&A</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <section class="fixed" style="z-index:999;width: 100%;height: 100%;background-color: #000;position: fixed;left: 0;top: 0;"></section>
    <div class="logo"></div>
    <div class="wrap_box">
        <div class="search_box">
            <i class="search_icon"></i>
            <input type="text" value="搜索栏" onfocus="if(value=='搜索栏') {value=''}" onblur="if (value=='') {value='搜索栏'}">
        </div>
        <ul class="question_list" id="example">
        </ul>
    </div>

</body>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
    var searchArrObj = [
        {"title":"满足什么条件可以续约获得续约奖励？","content":"可以续约获得可以续约获得可以续约获得可以续约获得","searchNum":"1"},
        {"title":"非原址续约或翻牌，是否可以拿到续约或翻牌奖励？","content":"可以续约获得可以续约获得可以续约获得可以续约获得","searchNum":"2"},
        {"title":"续约店装修支持是否可以只做室内,不做店招?？","content":"可以续约获得可以续约获得可以续约获得可以续约获得","searchNum":"1"},
        {"title":"什么店需要评估员评估？评估员的评估与销售意见不一致时，该如何处理？","content":"可以续约获得可以续约获得可以续约获得可以续约获得","searchNum":"5"},
        {"title":"CPD店是否可以将剩余装修费用转换成设备支持? BestDrive 设备怎么申请？","content":"可以续约获得可以续约获得可以续约获得可以续约获得","searchNum":"1"},
        {"title":"CPD,CSD，BestDrive具体装修费用多少？","content":"可以续约获得可以续约获得可以续约获得可以续约获得","searchNum":"8"},
        {"title":"特殊支持怎么申请?","content":"可以续约获得可以续约获得可以续约获得可以续约获得","searchNum":"1"},
        {"title":"门店需要维修，怎么申请?","content":"可以续约获得可以续约获得可以续约获得可以续约获得","searchNum":"1"},
        {"title":"合同资料都寄过来了，什么时候可以Contract并进场装修？","content":"可以续约获得可以续约获得可以续约获得可以续约获得","searchNum":"1"},
        {"title":"CSS是否可以申请形象支持？","content":"可以续约获得可以续约获得可以续约获得可以续约获得","searchNum":"10"}
    ];


    $(window).load(function () {
        initEvent();
        initData(searchArrObj);
    });

    function initData(searchArr){
        var sortedArr = sortData(searchArr);
        for(var i=0; i<sortedArr.length; i++){
            var obj = sortedArr[i];
            var recodeHtml = ""+
                "<li>"+
                    "<div class='sub_hd'>"+
                        "<p><span class='icon_q'></span>"+obj.title+"</p>"+
                        "<div class='sub_bd clearfix dno'>"+
                            "<span class='icon_a'></span>"+
                            "<p>"+obj.content+"</p>"+
                            "<span class='view_num'>"+obj.searchNum+"</span>"+
                        "</div>"+
                    "</div>"+
                "</li>";
            $(".question_list").append(recodeHtml);
        }
        //展开项
        $("#example .sub_hd p").on('click',function () {
            $(this).parent().children('.sub_bd').toggleClass('dno');
            $(this).parent().parent().siblings('li').find('.sub_bd').addClass('dno');
        })
    }

    function sortData(sortedDataArr){
         for (i = 1; i < sortedDataArr.length; i++) {
            for (j = 0; j < sortedDataArr.length - i; j++) {
                var temp;
                if (Number.parseInt(sortedDataArr[j].searchNum) < Number.parseInt(sortedDataArr[j + 1].searchNum)) {
                    temp = sortedDataArr[j];
                    sortedDataArr[j] = sortedDataArr[j + 1];
                    sortedDataArr[j + 1] = temp;
                }
            }
        }
        return sortedDataArr;
    }

    /**
     * 初始化
     */
    function initEvent(){
        selfAdaption();
        removeTopElement();
        $(".search_icon").click(function () {
            search();
        });

    }

    /**
     * 移除顶层元素
     */

    function removeTopElement() {
        $("section.fixed").remove();
    }

    /**
     *窗口发生改变
     */
    window.onresize = function () {
        selfAdaption();
    }

    /**
     * 自适应rem
     */
    function selfAdaption() {
        var screenWidth = document.documentElement.clientWidth;
        document.documentElement.style.fontSize = (100 / 640) * screenWidth + 'px';
    }

    /**
     * 展开项
     */
    $(".sub_hd p").on('click',function () {
        $(this).parent().children('.sub_bd').toggleClass('dno');
        $(this).parent().parent().siblings('li').find('.sub_bd').addClass('dno');
    })

    /**
     * 搜索
     */
    function search(){
        var resultArr = [];
        var index = 0;
        var searchText = $(".search_box input[type='text']").val().trim().toLowerCase();
        $(".question_list").empty();
        if (searchText == "" || searchText == "搜索栏") {
            resultArr = searchArrObj;
        }else{
            for(var i=0; i<searchArrObj.length; i++){
                var obj = searchArrObj[i];
                if(obj.title.toLowerCase().indexOf(searchText) >= 0 || obj.content.toLowerCase().indexOf(searchText) >= 0){
                    resultArr[index++] = obj;
                }
            }
        }
        initData(resultArr);

        if ($(".question_list").html() == "") {
            $(".question_list").html("<li>无搜索结果</li>");
        }
    }

    
</script>
</html>